<template>
  <div class="friendContaions">
    <div class="friendsList">
      <ul>
        <li @click="add()" class="mouse">

          <el-icon class="new">
            <Avatar />
          </el-icon>
          <p class="name ">新的朋友</p>


        </li>
        <li v-for="item in frinedstore.friends" @click="frined(item.id)" :key ="item.id" class="mouse">

          <img :src="item.img" alt="">
          <p class="name">{{item.name}}</p>
          <el-icon class="gochat" @click.stop="addChat(item.id)">
            <ChatRound />
          </el-icon>
          <el-popconfirm title="真要删?"    @confirm="confirmEvent(item.id)"
        >
            <template #reference>
              <el-icon class="rm">
                <CircleClose />
              </el-icon>
            </template>
          </el-popconfirm>

        </li>


      </ul>
    </div>
    <div class="findFriedns">
      <el-empty description="description" v-if="empty" />
      <component :is=comp v-if="!empty"></component>
    </div>
  </div>
</template>

<script setup>
import { defineOptions, ref ,shallowRef,onMounted} from 'vue';
import { Avatar, ChatRound, CircleClose } from '@element-plus/icons-vue'
import addfriend from '@/views/friend/addfriend.vue'
import friendDetail from '@/views/friend/friend.vue'
import { useFriendStore,useChatStore } from '@/stores'
import {addNowChatService,delFriendService,getFriendsService} from '@/api/chat.js'


const empty = ref(true)
const comp = shallowRef(friendDetail)
const frinedstore = useFriendStore();
const chatStore = useChatStore();
const emit = defineEmits(['addChats']);
onMounted(()=>{
})
// 删除
const confirmEvent =async (str)=>{
  console.log(str)
  chatStore.delFrined(str);
  await delFriendService(str);
  const {data:res} = await getFriendsService();
  frinedstore.setFriend(res.data);
}

const add = () => {
  empty.value = false

  comp.value = addfriend
}
const addChat = (id)=>{
  let flag = true;
  chatStore.nowChatFriends.forEach(nowChatFriend => {
               
                if (nowChatFriend.id + '' === id + '') {
                    //对话列表已经存在用户
                    flag = false;
                }
            })
  if(flag){
    console.log('发送请求',id)
    addNowChatService(id);
  }          
  emit('addChats',id);
}
const frined = (id) => {
  console.log(id)

  frinedstore.friends.forEach(item => {
                if (item.id === id) {
                  frinedstore.setFriendDetail(item);                                 
                }
            })
  empty.value = false
  comp.value = friendDetail
}
defineOptions({
  name: 'friend'
})
</script>

<style lang="less" scoped>
.friendContaions {
  display: flex;
  height: 100%;

  .friendsList {
    width: 25vw;
    background-color: #353333;
    height: 100%;
    min-width: 300px;
    li:hover {
      background-color: rgb(31, 29, 29);
    }

    ul li {
      margin: 1%;
      padding: 1%;
      border-bottom: #999 solid 1px;
      display: flex;
      align-items: center;
      color: rgb(165, 159, 159);
      position: relative;

      // vertical-align: middle;
      img {
        margin-right: 20px;
      }

      .name {
        // background-color: pink;
      }

      .gochat,
      .rm {
        position: absolute;
        right: 0;
        font-size: 24px;
      }

      .rm {
        transform: translateX(-140%);
      }
    }

    img {
      width: 6vh;
      height: 6vh;
      border-radius: 10%;

    }

    .new {
      font-size: 40px;
      color: rgb(117, 185, 40);
      margin-right: 20px;
    }
  }

  .findFriedns {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    height: 100%;
  }
}</style>